.flex-row {
    > div {
        &:first-child {
            width: auto;
            max-width: 100%;
            box-sizing: border-box;

            white-space: normal;
            word-wrap: break-word;

            // 防止内容溢出
            overflow-wrap: break-word;
            word-break: break-word;
        }
    }
}

.flex-row,
.flex-row-break {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    align-items: center;

    .fr-value,
    .bold {
        font-size: 14px;
        font-weight: bold;
        color: #000;
        word-break: break-all;
        overflow-wrap: break-word;
    }

    .bold {
        text-align: right;
    }

    .fr-value {
        font-size: 16px;
    }

    .fr-label {
        font-size: 14px;
        margin: 15px 0;
    }

    .fr-edit {
        color: @textLinkColor;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        min-width: 28px;
    }

    .fr-edit-disabled {
        font-size: 14px;
        font-weight: bold;
        color: #7f7f7f;
        cursor: no-drop;
    }

    img {
        position: static !important;
    }
}

@media (max-width: 480px) {
    .flex-row-break {
        flex-wrap: wrap;
        margin-bottom: 15px;
        min-height: 50px;
        height: 100%;

        > :first-child {
            background-color: #f2f2f2;
            width: 100%;
            height: auto !important;
            line-height: 25px !important;
            font-weight: 700;
        }

        > :nth-child(2) {
            font-weight: normal;
            width: 100%;
            text-align: left;
        }
    }
}

html&:dir(rtl) {
    .flex-row,
    .flex-row-break {
        .bold {
            text-align: left !important;
        }
    }

    @media (max-width: 480px) {
        .flex-row,
        .flex-row-break {
            .bold {
                text-align: right !important;
            }
        }
    }
}
